
<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/img/basic/favicon.ico" type="image/x-icon">
    <title>Paper</title>
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/app.css">
    <style>
        .loader {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #F5F8FA;
            z-index: 9998;
            text-align: center;
        }

        .plane-container {
            position: absolute;
            top: 50%;
            left: 50%;
        }
    </style>
    <!-- Js -->
    <!--
    --- Head Part - Use Jquery anywhere at page.
    --- http://writing.colin-gourlay.com/safely-using-ready-before-including-jquery/
    -->
    <script>(function(w,d,u){w.readyQ=[];w.bindReadyQ=[];function p(x,y){if(x=="ready"){w.bindReadyQ.push(y);}else{w.readyQ.push(x);}};var a={ready:p,bind:p};w.$=w.jQuery=function(f){if(f===d||f===u){return a}else{p(f)}}})(window,document)</script>
</head>
<body class="light">
<!-- Pre loader -->
<div id="loader" class="loader">
    <div class="plane-container">
        <div class="preloader-wrapper small active">
            <div class="spinner-layer spinner-blue">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div><div class="gap-patch">
                <div class="circle"></div>
            </div><div class="circle-clipper right">
                <div class="circle"></div>
            </div>
            </div>

            <div class="spinner-layer spinner-red">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div><div class="gap-patch">
                <div class="circle"></div>
            </div><div class="circle-clipper right">
                <div class="circle"></div>
            </div>
            </div>

            <div class="spinner-layer spinner-yellow">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div><div class="gap-patch">
                <div class="circle"></div>
            </div><div class="circle-clipper right">
                <div class="circle"></div>
            </div>
            </div>

            <div class="spinner-layer spinner-green">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div><div class="gap-patch">
                <div class="circle"></div>
            </div><div class="circle-clipper right">
                <div class="circle"></div>
            </div>
            </div>
        </div>
    </div>
</div>
<div id="app">
<aside class="main-sidebar fixed shadow2 bg-dark no-b sidebar-dark p-3">
    <section class="sidebar">
        <div class="mt-5 pt-5 pb-5 ml-3">
            <figure class="avatar  dropdown">
                <a href="#" data-toggle="dropdown">
                    <img src="assets/img/dummy/u7.png" alt="">
                    <span class="avatar-badge has-indicator online">
                              <i class="icon icon-check"></i>
                            </span>
                </a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">Online</a>
                    <a href="#" class="dropdown-item">Warning</a>
                    <a href="#" class="dropdown-item">Busy</a>
                    <a href="#" class="dropdown-item">Offline</a>
                </div>
            </figure>
        </div>
        <ul class="sidebar-menu">
            <li class="treeview"><a href="#">
                    <span>Dashboard</span> <i
                    class="icon icon-angle-left  pull-right"></i>
            </a>
                <ul class="treeview-menu">
                    <li><a href="index.html"><i class="icon icon-folder5"></i>Panel Dashboard 1</a>
                    </li>
                    <li><a href="panel-page-dashboard1-rtl.html"><i class="icon icon-folder5"></i>Panel Dashboard 1 - RTL</a>
                    </li>
                    <li><a href="panel-page-dashboard2.html"><i class="icon icon-folder5"></i>Panel Dashboard 2</a>
                    </li>
                    <li><a href="panel-page-dashboard3.html"><i class="icon icon-folder5"></i>Panel Dashboard 3</a>
                    </li>
                    <li><a href="panel-page-dashboard4.html"><i class="icon icon-folder5"></i>Panel Dashboard 4</a>
                    </li>
                    <li><a href="panel-page-dashboard5.html"><i class="icon icon-folder5"></i>Panel Dashboard 5</a>
                    </li>
                    <li><a href="panel-page-dashboard6.html"><i class="icon icon-folder5"></i>Panel Dashboard 6</a>
                    </li>
                    <li><a href="panel-page-dashboard7.html"><i class="icon icon-folder5"></i>Panel Dashboard 7</a>
                    </li>
                    <li><a href="panel-page-dashboard8.html"><i class="icon icon-folder5"></i>Panel Dashboard 8</a>
                    </li>
                    <li><a href="panel-page-dashboard9.html"><i class="icon icon-folder5"></i>Panel Dashboard 9</a>
                    </li>
                </ul>
            </li>
            <li class="treeview"><a href="#">
                <span>Products</span>
                <span class="badge r-3 badge-primary pink pull-right">4</span>
            </a>
                <ul class="treeview-menu">
                    <li><a href="panel-page-products.html"><i class="icon icon-circle-o"></i>All Products</a>
                    </li>
                    <li><a href="panel-page-products-create.html"><i class="icon icon-add"></i>Add
                        New </a>
                    </li>
                </ul>
            </li>
            <li class="treeview"><a href="#">
                Users<i class="icon icon-angle-left  pull-right"></i></a>
                <ul class="treeview-menu">
                    <li><a href="panel-page-users.html"><i class="icon icon-circle-o"></i>All Users</a>
                    </li>
                    <li><a href="panel-page-users-create.html"><i class="icon icon-add"></i>Add User</a>
                    </li>
                    <li><a href="panel-page-profile.html"><i class="icon icon-user"></i>User Profile </a>
                    </li>
                </ul>
            </li>
            <li class="treeview no-b"><a href="#">
                <span>Inbox</span>
                <span class="badge r-3 badge-success indigo pull-right">20</span>
            </a>
                <ul class="treeview-menu">
                    <li><a href="panel-page-inbox.html"><i class="icon icon-circle-o"></i>All Messages</a>
                    </li>
                    <li><a href="panel7-inbox.html"><i class="icon icon-circle-o"></i>Panel7 - Inbox</a>
                    </li>
                    <li><a href="panel8-inbox.html"><i class="icon icon-circle-o"></i>Panel8 - Inbox</a>
                    </li>
                    <li><a href="panel-page-inbox-create.html"><i class="icon icon-add"></i>Compose</a>
                    </li>
                </ul>
            </li>
            <li class="header mt-3 font-weight-light b-t"><strong>UI COMPONENTS</strong></li>
            <li class="treeview ">
                <a href="#">
                    Apps</span>
                    <i class="icon icon-angle-left  pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="panel-page-chat.html"><i class="icon icon-circle-o"></i>Chat</a>
                    </li>
                    <li><a href="panel7-tasks.html"><i class="icon icon-circle-o"></i>Tasks / Todo</a>
                    </li>
                    <li><a href="panel-page-calendar.html"><i class="icon icon-date_range"></i>Calender</a>
                    </li>
                    <li><a href="panel-page-calendar2.html"><i class="icon icon-date_range"></i>Calender 2</a>
                    </li>
                    <li><a href="panel-page-contacts.html"><i class="icon icon-circle-o"></i>Contacts</a>
                    </li>
                    <li><a href="panel1-projects.html"><i class="icon icon-circle-o"></i>Panel1 - Projects</a>
                    </li>
                    <li><a href="panel7-projects-list.html"><i class="icon icon-circle-o"></i>Panel7 - Projects List</a>
                    </li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#">
                    <span>Pages</span>
                    <i class="icon icon-angle-left  pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="#"><i class="icon icon-documents3"></i>Blank Pages<i
                            class="icon icon-angle-left  pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="panel-page-blank.html"><i class="icon icon-document"></i>Simple Blank</a>
                            </li>
                            <li><a href="panel-page-blank-tabs.html"><i class="icon icon-document"></i>Tabs Blank <i
                                    class="icon icon-angle-left  pull-right"></i></a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="icon icon-fingerprint text-green"></i>Auth Pages<i
                            class="icon icon-angle-left  pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="login.html"><i class="icon icon-document"></i>Login Page 1</a>
                            </li>
                            <li><a href="login-2.html"><i class="icon icon-document"></i>Login Page 2</a>
                            </li>
                            <li><a href="login-3.html"><i class="icon icon-document"></i>Login Page 3</a>
                            </li>
                            <li><a href="login-4.html"><i class="icon icon-document"></i>Login Page 4</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="icon icon-bug text-red"></i>Error Pages<i
                            class="icon icon-angle-left  pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="panel-page-404.html"><i class="icon icon-document"></i>404 Page</a>
                            </li>
                            <li><a href="panel-page-500.html"><i class="icon icon-document"></i>500 Page<i
                                    class="icon icon-angle-left  pull-right"></i></a>
                            </li>
                            <li><a href="panel-page-error.html"><i class="icon icon-document"></i>420 Page<i
                                    class="icon icon-angle-left  pull-right"></i></a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="icon icon-documents3"></i>Other Pages<i
                            class="icon icon-angle-left  pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="panel-page-invoice.html"><i class="icon icon-document"></i>Invoice Page</a>
                            </li>
                            <li><a href="panel-page-no-posts.html"><i class="icon icon-document"></i>No Post Page</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#">
                   <span>Elements</span>
                    <i class="icon icon-angle-left  pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="panel-element-widgets.html">
                        <i class="icon icon-widgets amber-text s-14"></i> <span>Widgets</span>
                    </a>
                    </li>
                    <li><a href="panel-element-counters.html">
                        <i class="icon icon-filter_9_plus amber-text s-14"></i> <span>Counters</span>
                    </a>
                    <li><a href="panel-element-buttons.html">
                        <i class="icon icon-touch_app amber-text s-14"></i> <span>Buttons</span>
                    </a>
                    </li>
                    <li>
                        <a href="panel-element-typography.html">
                            <i class="icon icon-text-width amber-text s-14"></i> <span>Typography</span>
                        </a>
                    </li>
                    <li><a href="panel-element-tabels.html">
                        <i class="icon icon-table amber-text s-14"></i> <span>Tables</span>
                    </a>
                    </li>
                    <li><a href="panel-element-alerts.html">
                        <i class="icon icon-exclamation-circle amber-text s-14"></i> <span>Alerts</span>
                    </a>
                    </li>
                    <li><a href="panel-element-slider.html"><i class="icon icon-view_carousel amber-text s-14"></i>
                        <span>Slider</span></a></li>
                    <li><a href="panel-element-tabs.html"><i class="icon icon-folders2 amber-text s-14"></i>
                        <span>Tabs</span></a></li>
                    <li><a href="panel-element-progress-bars.html"><i class="icon icon-folders2 amber-text s-14"></i>
                        <span>Progress Bars</span></a></li>
                    <li><a href="panel-element-badges.html"><i class="icon icon-flag7 amber-text s-14"></i>
                        <span>Badges</span></a></li>
                    <li><a href="panel-element-preloaders.html"><i class="icon icon-data_usage amber-text s-14"></i>
                        <span>Preloaders</span></a></li>
                </ul>
            </li>
            <li class="treeview ">
                <a href="#">
                   <span>Forms & Plugins</span>
                    <i class="icon icon-angle-left  pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="panel-element-forms.html"><i class="icon icon-wpforms light-green-text"></i>Bootstrap
                        Inputs</a>
                    </li>
                    <li><a href="form-jquery-validations.html"><i class="icon icon-note-important light-green-text"></i>
                        Form Validation (Jquery)</a>
                    </li>
                    <li><a href="form-bootstrap-validations.html"><i class="icon icon-note-important light-green-text"></i>
                        Form Validation (Bootstrap)</a>
                    </li>
                    <li><a href="panel-element-editor.html"><i class="icon icon-pen2 light-green-text"></i>Editor</a>
                    </li>
                    <li><a href="panel-element-toast.html"><i
                            class="icon icon-notifications_active light-green-text"></i>Toasts</a>
                    </li>
                    <li><a href="panel-element-stepper.html"><i class="icon icon-burst_mode light-green-text"></i>Stepper</a>
                    </li>
                    <li><a href="panel-element-date-time-picker.html"><i
                            class="icon icon-date_range light-green-text"></i>Date Time Picker</a>
                    </li>
                    <li><a href="panel-element-color-picker.html"><i class="icon icon-adjust light-green-text"></i>Color
                        Picker</a>
                    </li>
                    <li><a href="panel-element-range-slider.html"><i class="icon icon-space_bar light-green-text"></i>Range
                        Slider</a>
                    </li>
                    <li><a href="panel-element-select2.html"><i
                            class="icon  icon-one-finger-click light-green-text"></i>Select 2</a>
                    </li>
                    <li><a href="panel-element-tags.html"><i class="icon  icon-tags3 light-green-text"></i>Tags</a>
                    </li>
                    <li><a href="panel-element-data-tables.html"><i class="icon icon-table light-green-text"></i>Data
                        Tables</a>
                    </li>
                </ul>
            </li>
            <li class="treeview"><a href="#">
                <span>Charts</span>
                <i class="icon icon-angle-left  pull-right"></i>
            </a>
                <ul class="treeview-menu">
                    <li>
                        <a href="panel-element-charts-js.html"><i class="icon icon-area-chart pink-text s-14"></i><span>Charts.Js</span></a>
                    </li>
                    <li>
                        <a href="panel-element-morris.html"><i class="icon icon-bubble_chart pink-text s-14"></i>Morris
                            Charts</a>
                    </li>
                    <li>
                        <a href="panel-element-echarts.html">
                            <i class="icon icon-bar-chart-o pink-text s-14"></i>Echarts</a>
                    </li>
                    <li>
                        <a href="panel-element-easy-pie-charts.html">
                            <i class="icon icon-area-chart pink-text s-14"></i>Easy Pie Charts</a>
                    </li>
                    <li>
                        <a href="panel-element-jqvmap.html">
                            <i class="icon icon-map pink-text s-14"></i>Jqvmap</a>
                    </li>
                    <li>
                        <a href="panel-element-sparklines.html">
                            <i class="icon icon-line-chart2 pink-text s-14"></i>Sparklines</a>
                    </li>
                    <li>
                        <a href="panel-element-float.html">
                            <i class="icon icon-pie-chart pink-text s-14"></i>Float Charts</a>
                    </li>
                </ul>
            </li>
            <li class="treeview"><a href="#">
                <span>Extra</span>
                <i class="icon icon-angle-left  pull-right"></i>
            </a>
                <ul class="treeview-menu">
                    <li>
                        <a href="panel-element-letters.html">
                            <i class="icon icon-brightness_auto light-blue-text s-14"></i>
                            <span>Avatar Placeholders</span>
                        </a>
                    </li>
                    <li>
                        <a href="panel-element-icons.html">
                            <i class="icon icon-camera2 light-blue-text s-14"></i> <span>Icons</span>
                        </a>
                    </li>
                    <li><a href="panel-element-colors.html">
                        <i class="icon icon-palette light-blue-text s-14"></i> <span>Colors</span>
                    </a>
                    </li>
                </ul>
            </li>
        </ul>
    </section>
</aside>
<!--Sidebar End-->
<a href="#" data-toggle="push-menu" class="paper-nav-toggle left">
    <i></i>
</a>
<div class="page has-sidebar-left height-full">
    <div class="container-fluid relative animatedParent animateOnce p-lg-5">
        <div class="row">
            <div class="col-md-3 ">
                <div class="pt-5 pb-lg-5 pt-xs-5 relative">
                    <h1>
                        Inbox
                    </h1>
                    <strong>Current Job Summary</strong>
                </div>
                <a href="compose.html" class="btn btn-primary btn-lg  mb-5">Create New Message</a>
                <ul class="sidebar-menu">
                    <li class="header"><strong>MAIN NAVIGATION</strong></li>
                    <li class="treeview"><a href="#"><i class="icon icon-inbox text-purple s-18"></i>Inbox</a>
                    </li>
                    <li class="treeview"><a href="#"><i class="icon icon-star-o lime-text s-18"></i>Starred</a>
                    </li>
                    <li class="treeview"><a href="#"><i class="icon icon-send-o indigo-text s-18"></i>Sent</a>
                    </li>
                    <li class="treeview"><a href="#"><i class="icon icon-trash-o text-danger s-18"></i>Trash</a>
                    </li>
                    <li class="divider">
                        <hr>
                    </li>
                    <li class="treeview"><a href="#"><i class="icon icon-circle-o text-danger s-18"></i>Important</a>
                    </li>
                    <li class="treeview"><a href="#"><i class="icon icon-circle-o text-warning s-18"></i>Promotions</a>
                    </li>
                    <li class="treeview"><a href="#"><i class="icon icon-circle-o text-primary s-18"></i>Social</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-9">
                <div class="card no-b my-3 shadow2">
                    <div class="card-header white p-3 d-flex justify-content-between ">
                        <h4>Messages</h4>
                        <div class="dropdown">
                            <a class="" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="icon-more_vert p-0 s-16"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">View
                                    Profile </a>
                                <a class="dropdown-item" href="#">Account
                                    Settings </a>
                                <a class="dropdown-item" href="#">
                                    Earning Reports </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Logout
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <form>
                                <table class="table table-striped table-hover r-0">
                                    <thead>
                                    <tr class="no-b">
                                        <th style="width: 30px">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" id="checkedAll"
                                                       class="custom-control-input"><label
                                                    class="custom-control-label" for="checkedAll"></label>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="dropdown">
                                                <button class="btn btn-secondary btn-sm dropdown-toggle r-3 pr-3 pl-3"
                                                        type="button" id="dropdownMenuButton" data-toggle="dropdown"
                                                        aria-haspopup="true" aria-expanded="false">
                                                    Action
                                                </button>
                                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                    <a class="dropdown-item" href="#">Action</a>
                                                    <a class="dropdown-item" href="#">Another action</a>
                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                </div>
                                            </div>
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input checkSingle"
                                                       id="user_id_1" required><label
                                                    class="custom-control-label" for="user_id_1"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="avatar avatar-md mr-3 mt-1 float-left">
                                                <span class="avatar-letter avatar-letter-a  avatar-md circle"></span>
                                            </div>
                                            <div>
                                                <div>
                                                    <strong>Alexander Pierce</strong>
                                                </div>
                                                <small> The only Bootstrap Admin Template you need to create amazing
                                                    user interfaces
                                                </small>
                                            </div>
                                        </td>
                                        <td><i class="icon-star"></i></td>
                                        <td><span class="icon icon-circle s-12  mr-2 text-warning"></span></td>
                                        <td>
                                            <a href="panel-page-profile.html"
                                               class="btn-fab btn-fab-sm btn-primary shadow text-white"><i
                                                    class="icon-eye"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input checkSingle"
                                                       id="user_id_2" required><label
                                                    class="custom-control-label" for="user_id_2"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="avatar avatar-md mr-3 mt-1 float-left">
                                                <span class="avatar-letter avatar-letter-b  avatar-md circle"></span>
                                            </div>
                                            <div>
                                                <div>
                                                    <strong>Blexander Pierce</strong>
                                                </div>
                                                <small> The only Bootstrap Admin Template you need to create amazing
                                                    user interfaces
                                                </small>
                                            </div>
                                        </td>
                                        <td><i class="icon-star"></i></td>
                                        <td><span class="icon icon-circle s-12  mr-2 text-warning"></span></td>
                                        <td>
                                            <a href="panel-page-profile.html"
                                               class="btn-fab btn-fab-sm btn-primary shadow text-white"><i
                                                    class="icon-eye"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input checkSingle"
                                                       id="user_id_3" required><label
                                                    class="custom-control-label" for="user_id_3"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="avatar avatar-md mr-3 mt-1 float-left">
                                                <span class="avatar-letter avatar-letter-m  avatar-md circle"></span>
                                            </div>
                                            <div>
                                                <div>
                                                    <strong>Mlexander Pierce</strong>
                                                </div>
                                                <small>The only Bootstrap Admin Template you need to create amazing user
                                                    interfaces
                                                </small>
                                            </div>
                                        </td>
                                        <td><i class="icon-star"></i></td>
                                        <td><span class="icon icon-circle s-12  mr-2 text-success"></span></td>
                                        <td>
                                            <a href="panel-page-profile.html"
                                               class="btn-fab btn-fab-sm btn-primary shadow text-white"><i
                                                    class="icon-eye"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input checkSingle"
                                                       id="user_id_4" required><label
                                                    class="custom-control-label" for="user_id_4"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="avatar avatar-md mr-3 mt-1 float-left">
                                                <span class="avatar-letter avatar-letter-y  avatar-md circle"></span>
                                            </div>
                                            <div>
                                                <div>
                                                    <strong>Ylexander Pierce</strong>
                                                </div>
                                                <small>The only Bootstrap Admin Template you need to create amazing user
                                                    interfaces
                                                </small>
                                            </div>
                                        </td>
                                        <td><i class="icon-star"></i></td>
                                        <td><span class="icon icon-circle s-12  mr-2 text-danger"></span></td>
                                        <td>
                                            <a href="panel-page-profile.html"
                                               class="btn-fab btn-fab-sm btn-primary shadow text-white"><i
                                                    class="icon-eye"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input checkSingle"
                                                       id="user_id_5" required><label
                                                    class="custom-control-label" for="user_id_5"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="avatar avatar-md mr-3 mt-1 float-left">
                                                <img src="assets/img/dummy/u5.png" alt="">
                                            </div>
                                            <div>
                                                <div>
                                                    <strong>Alexander Pierce</strong>
                                                </div>
                                                <small> The only Bootstrap Admin Template you need to create amazing
                                                    user interfaces
                                                </small>
                                            </div>
                                        </td>
                                        <td><i class="icon-star"></i></td>
                                        <td><span class="icon icon-circle s-12  mr-2 text-success"></span></td>
                                        <td>
                                            <a href="panel-page-profile.html"
                                               class="btn-fab btn-fab-sm btn-primary shadow text-white"><i
                                                    class="icon-eye"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input checkSingle"
                                                       id="user_id_6" required><label
                                                    class="custom-control-label" for="user_id_6"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="avatar avatar-md mr-3 mt-1 float-left">
                                                <span class="avatar-letter avatar-letter-p  avatar-md circle"></span>
                                            </div>
                                            <div>
                                                <div>
                                                    <strong>Plexander Pierce</strong>
                                                </div>
                                                <small>The only Bootstrap Admin Template you need to create amazing user
                                                    interfaces
                                                </small>
                                            </div>
                                        </td>
                                        <td><i class="icon-star"></i></td>
                                        <td><span class="icon icon-circle s-12  mr-2 text-success"></span></td>
                                        <td>
                                            <a href="panel-page-profile.html"
                                               class="btn-fab btn-fab-sm btn-primary shadow text-white"><i
                                                    class="icon-eye"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input checkSingle"
                                                       id="user_id_7" required><label
                                                    class="custom-control-label" for="user_id_7"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="avatar avatar-md mr-3 mt-1 float-left">
                                                <img src="assets/img/dummy/u7.png" alt="">
                                            </div>
                                            <div>
                                                <div>
                                                    <strong>Alexander Pierce</strong>
                                                </div>
                                                <small> The only Bootstrap Admin Template you need to create amazing
                                                    user interfaces
                                                </small>
                                            </div>
                                        </td>
                                        <td><i class="icon-star"></i></td>
                                        <td><span class="icon icon-circle s-12  mr-2 text-success"></span></td>
                                        <td>
                                            <a href="panel-page-profile.html"
                                               class="btn-fab btn-fab-sm btn-primary shadow text-white"><i
                                                    class="icon-eye"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input checkSingle"
                                                       id="user_id_8" required><label
                                                    class="custom-control-label" for="user_id_8"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="avatar avatar-md mr-3 mt-1 float-left">
                                                <img src="assets/img/dummy/u8.png" alt="">
                                            </div>
                                            <div>
                                                <div>
                                                    <strong>Alexander Pierce</strong>
                                                </div>
                                                <small> The only Bootstrap Admin Template you need to create amazing
                                                    user interfaces
                                                </small>
                                            </div>
                                        </td>
                                        <td><i class="icon-star"></i></td>
                                        <td><span class="icon icon-circle s-12  mr-2 text-danger"></span></td>
                                        <td>
                                            <a href="panel-page-profile.html"
                                               class="btn-fab btn-fab-sm btn-primary shadow text-white"><i
                                                    class="icon-eye"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input checkSingle"
                                                       id="user_id_9" required><label
                                                    class="custom-control-label" for="user_id_9"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="avatar avatar-md mr-3 mt-1 float-left">
                                                <img src="assets/img/dummy/u3.png" alt="">
                                            </div>
                                            <div>
                                                <div>
                                                    <strong>Alexander Pierce</strong>
                                                </div>
                                                <small> The only Bootstrap Admin Template you need to create amazing
                                                    user interfaces
                                                </small>
                                            </div>
                                        </td>
                                        <td><i class="icon-star"></i></td>
                                        <td><span class="icon icon-circle s-12  mr-2 text-success"></span></td>
                                        <td>
                                            <a href="panel-page-profile.html"
                                               class="btn-fab btn-fab-sm btn-primary shadow text-white"><i
                                                    class="icon-eye"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input checkSingle"
                                                       id="user_id_10" required><label
                                                    class="custom-control-label" for="user_id_10"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="avatar avatar-md mr-3 mt-1 float-left">
                                                <img src="assets/img/dummy/u1.png" alt="">
                                            </div>
                                            <div>
                                                <div>
                                                    <strong>Alexander Pierce</strong>
                                                </div>
                                                <small> The only Bootstrap Admin Template you need to create amazing
                                                    user interfaces
                                                </small>
                                            </div>
                                        </td>
                                        <td><i class="icon-star"></i></td>
                                        <td><span class="icon icon-circle s-12  mr-2 text-success"></span></td>
                                        <td>
                                            <a href="panel-page-profile.html"
                                               class="btn-fab btn-fab-sm btn-primary shadow text-white"><i
                                                    class="icon-eye"></i></a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Right Sidebar -->
<aside class="control-sidebar fixed white ">
    <div class="slimScroll">
        <div class="sidebar-header">
            <h4>Activity List</h4>
            <a href="#" data-toggle="control-sidebar" class="paper-nav-toggle  active"><i></i></a>
        </div>
        <div class="p-3">
            <div>
                <div class="my-3">
                    <small>25% Complete</small>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="my-3">
                    <small>45% Complete</small>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar bg-info" role="progressbar" style="width: 45%;" aria-valuenow="45"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="my-3">
                    <small>60% Complete</small>
                    `
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 60%;" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="my-3">
                    <small>75% Complete</small>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar bg-danger" role="progressbar" style="width: 75%;" aria-valuenow="75"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="my-3">
                    <small>100% Complete</small>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-3 bg-primary text-white">
            <div class="row">
                <div class="col-md-6">
                    <h5 class="font-weight-normal s-14">Sodium</h5>
                    <span class="font-weight-lighter text-primary">Spark Bar</span>
                    <div> Oxygen
                        <span class="text-primary">
                                                    <i class="icon icon-arrow_downward"></i> 67%</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <canvas width="100" height="70" data-chart="spark" data-chart-type="bar"
                            data-dataset="[[28,68,41,43,96,45,100,28,68,41,43,96,45,100,28,68,41,43,96,45,100,28,68,41,43,96,45,100]]"
                            data-labels="['a','b','c','d','e','f','g','h','i','j','k','l','m','n','a','b','c','d','e','f','g','h','i','j','k','l','m','n']">
                    </canvas>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table id="recent-orders" class="table table-hover mb-0 ps-container ps-theme-default">
                <tbody>
                <tr>
                    <td>
                        <a href="#">INV-281281</a>
                    </td>
                    <td>
                        <span class="badge badge-success">Paid</span>
                    </td>
                    <td>$ 1228.28</td>
                </tr>
                <tr>
                    <td>
                        <a href="#">INV-01112</a>
                    </td>
                    <td>
                        <span class="badge badge-warning">Overdue</span>
                    </td>
                    <td>$ 5685.28</td>
                </tr>
                <tr>
                    <td>
                        <a href="#">INV-281012</a>
                    </td>
                    <td>
                        <span class="badge badge-success">Paid</span>
                    </td>
                    <td>$ 152.28</td>
                </tr>
                <tr>
                    <td>
                        <a href="#">INV-01112</a>
                    </td>
                    <td>
                        <span class="badge badge-warning">Overdue</span>
                    </td>
                    <td>$ 5685.28</td>
                </tr>
                <tr>
                    <td>
                        <a href="#">INV-281012</a>
                    </td>
                    <td>
                        <span class="badge badge-success">Paid</span>
                    </td>
                    <td>$ 152.28</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="sidebar-header">
            <h4>Activity</h4>
            <a href="#" data-toggle="control-sidebar" class="paper-nav-toggle  active"><i></i></a>
        </div>
        <div class="p-4">
            <div class="activity-item activity-primary">
                <div class="activity-content">
                    <small class="text-muted">
                        <i class="icon icon-user position-left"></i> 5 mins ago
                    </small>
                    <p>Lorem ipsum dolor sit amet conse ctetur which ascing elit users.</p>
                </div>
            </div>
            <div class="activity-item activity-danger">
                <div class="activity-content">
                    <small class="text-muted">
                        <i class="icon icon-user position-left"></i> 8 mins ago
                    </small>
                    <p>Lorem ipsum dolor sit ametcon the sectetur that ascing elit users.</p>
                </div>
            </div>
            <div class="activity-item activity-success">
                <div class="activity-content">
                    <small class="text-muted">
                        <i class="icon icon-user position-left"></i> 10 mins ago
                    </small>
                    <p>Lorem ipsum dolor sit amet cons the ecte tur and adip ascing elit users.</p>
                </div>
            </div>
            <div class="activity-item activity-warning">
                <div class="activity-content">
                    <small class="text-muted">
                        <i class="icon icon-user position-left"></i> 12 mins ago
                    </small>
                    <p>Lorem ipsum dolor sit amet consec tetur adip ascing elit users.</p>
                </div>
            </div>
        </div>
    </div>
</aside>
<!-- /.right-sidebar -->
<!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
<div class="control-sidebar-bg shadow white fixed"></div>
</div>
<!--/#app -->
<script src="assets/js/app.js"></script>
<!--
--- Footer Part - Use Jquery anywhere at page.
--- http://writing.colin-gourlay.com/safely-using-ready-before-including-jquery/
-->
<script>(function($,d){$.each(readyQ,function(i,f){$(f)});$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document)</script>
</body>
</html>